Página Personal de Francisco José Hernández Mocholí

El nuevo elemento <picture> de HTML5 permite describir con todo detalle cómo deben cargarse las imágenes de tu sitio web. Ya no serán necesarios los hacks de CSS o JavaScript para gestionar las imágenes responsive de los diseños web. Además, los usuarios se aprovecharán de las ventajas de cargar solamente las imágenes optimizadas para el dispositivo que están utilizando, lo que es especialmente útil para usuarios con móviles y conexiones lentas a Internet.Al margen de los nuevos atributos srcset y sizes definidos recientemente para los elementos <img>, el nuevo elemento <picture> permite una mayor flexibilidad al especificar qué imágenes utiliza el sitio. Gracias a este elemento <picture>, será posible escribir código HTML limpio y semántico, dejando que el navegador haga todo el trabajo de seleccionar la mejor imagen para cada situación.La elección del mejor archivo de imagen depende de muchos factores. Cuando se utiliza el nuevo elemento <picture> o el elemento <img> con los atributos srcset y sizes, el navegador solamente descarga la imagen adecuada para el navegador y las condiciones de acceso del usuario (tamaño del navegador, densidad en píxeles de la pantalla, formatos soportados por el navegador, etc.) La ventaja de que este comportamiento sea nativo del navegador es que se pueden aprovechar todas las funcionalidades de los navegadores, como la caché de contenidos y la precarga de imágenes. Actualmente la implementación nativa para <picture> está en desarrollo para Chrome, Firefox y Opera. En el futuro será de esperarse que habrá un soporte más abierto por otros navegadores. Pero por el momento soporte para este elemento todavía está por llegar. El elemento <picture> en sí no representa contenido alguno, sirve sólo como un contenedor para escribir varias imágenes y que sea el propio navegador el que elija la más apropiada en cada caso. Para indicar las imágenes dentro de <picture> se indicarán varias etiquetas SOURCE. Se parece algo a la etiqueta <video> o <audio>, en el que se pueden indicar varios archivos diferentes.

Los frames (frame en inglés significa marco) son unas herramientas que han tenido una historia dilatada en el desarrollo de páginas web con HTML. De ser una etiqueta no estándar ha pasado a ser soportada por todos los navegadores y formar parte de las especificaciones de HTML. Por otra parte, el frame siempre ha sido una utilidad para hacer páginas web de uso, cuando menos, controvertido, puesto que tiene ciertas desventajas que muchas veces son más importantes que la indudable practicidad. En cualquier caso, en DesarrolloWeb.com ya hemos hablado suficiente sobre la etiqueta Frame y hemos tratado ampliamente sus ventajas e inconvenientes. En este artículo vamos a hablar de una etiqueta "hermana" que es a día de hoy mucho más usada, porque resulta más útil y menos problemática que los propios frames. Se trata de iframe, un tag incluido en las especificaciones de HTML 4.0.Actualmente la etiqueta iframe se utiliza más a menudo que la etiqueta frame, porque no da tantos problemas como esta. La diferencia principal está basada en que la etiqueta iframe no necesita una declaración de los espacios de los frames o frameset, porque se incrusta en el código HTML de la página. El iframe, por tanto, no provoca problemas de navegación, como los que ocurren con los frames normales si no se entra correctamente a través del frameset. También, ya que no existe el frameset en los iframe, no adolece de los problemas del uso de frames, sobretodo a la hora en que la página es indexada en los motores de búsqueda.Por decirlo de alguna manera, trabajar con iframe o frames flotantes es tan sencillo como hacer una tabla, que se codifica dentro de la maqueta HTML, con su espacio reservado dentro de la página. Así, la única diferencia con respecto a una tabla es que el contenido del iframe se extrae de otra página web.